<!doctype html>
<html lang="en" class="no-js">

<head>
    <meta charset="UTF-8">
    <title>ArcFace Electron</title>
    <link rel="stylesheet" href="static/css/addClass.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
</head>

<body onbeforeunload="websocketClose()">

    <div class="headertop titlebar">
        <!-- <div class="header-logo"><img src="public/images/logo.png" /></div> -->
        <div class="header-logo">
            <p>RETINA ARC FACE -- via InsightFace</p>
        </div>
    </div>

    <div class="main-box px-4" style="padding-top:80px;">
        <div class='row' style="padding-left:40px;padding-right:40px;">
            <div class="jumbotron btn btn-outline-info col-md-6" onclick="window.location.reload()"
                style="background:transparent;height:200px;">
                <h1>Retina Arc Face - <small>Face Detection and Recognition</small></h1>
                <span>ver.RetinaFace_ArcFace_mikomiko_algorithm_v2_190602_debug</span>
            </div>

            <div class="col-md-6" style="background:transparent;height:200px;">
                <hr />
                <div id="camera_list_top" class="btn-group h-25 w-100"></div>
                <hr />
                <div id="camera_list_down" class="btn-group h-25 w-100"></div>
            </div>
        </div>

        <div class="zsuo-map">
            <div class="zsuo-map-box zsuo-map-right">
                <canvas style="margin: 1px;" id="c" width="1121" height="672" />
            </div>

            <div class="zsuo-map-box zsuo-map-left">
                <div id = 'worker_list'>

                </div>

                <div id = 'suspect_list'>

                </div>
            </div>
        </div>
    </div>

    <script src="static/js/socket.io.slim.js"></script>
    <script src="static/js/renderer.js"></script>
</body>

</html>